<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 100vh;
            display: flex;
        }

        canvas {
            margin: auto;
            display: none;
        }

        img {
            margin: auto;
        }
    </style>
</head>

<body>
    <canvas width="850" height="600" id="canvas"></canvas>
    <img src="" id="printImg">
    <script>
        const printImg = document.getElementById('printImg')
        let canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            font_height = 15,//字体大小
            padding = 300,// 钟面板与画布的间距
            radius = canvas.width / 2 - padding,//圆盘半径
            hand_radius = radius + 20,//数字半径
            seconds_radius = radius - 30,
            minutes_radius = radius - 60,
            hour_radius = radius - 100;
        ctx.font = font_height + 'px Arial';
        ctx.fillStyle = "red"
        ctx.strokeStyle = 'red'

        const bird = new Image();
        bird.src = 'bird.jpg'
        function drawClock() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 画鸟
            drawBird()
            drawCircle();// 画钟的圆盘
            drawCenter();// 画中心点
            drawNumerals();// 画数字
            drawHands();// 画指针
            drawLocImg();//生成图片
        }
        drawClock();

        // 画钟的圆盘
        function drawCircle() {
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI)
            ctx.stroke();
        }
        // 画中心点
        function drawCenter() {
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2, 5, 0, 2 * Math.PI)
            ctx.fill();
        }

        // 画数字
        function drawNumerals() {
            let numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], rad = 0, numeralWidth = 0;

            numerals.forEach(function (numeral) {
                //数字对应的角度
                const angle = numeral * (360 / 12)
                // 数字对应的弧度
                const rad = 2 * Math.PI / 360 * angle;//1°等于Math.PI*1弧度 / 180
                numeralWidth = ctx.measureText(numeral).width;
                const x = canvas.width / 2 + Math.sin(rad) * hand_radius - numeralWidth / 2
                const y = canvas.height / 2 - Math.cos(rad) * hand_radius + font_height / 3
                ctx.fillText(numeral, x, y);
            })
        }


        // 画指针
        function drawHands() {
            // 获取时间
            const date = new Date();
            let hour = date.getHours();
            let minutes = date.getMinutes()
            let seconds = date.getSeconds()
            // 处理小时

            hour = hour > 12 ? hour - 12 : hour
            // 画秒针
            drawHand(seconds, seconds_radius, 60)
            // 画分针
            drawHand(minutes, minutes_radius, 60)
            // 画时针
            drawHand(hour, hour_radius, 12, minutes * 30 / 60)
        }
        function drawHand(loc, loc_radius, angle, min_angle) {
            // 秒和分对应的角度
            angle = loc * (360 / angle)
            if (min_angle) {
                angle = angle + min_angle
            }
            // 秒和分对应的弧度
            const rad = 2 * Math.PI / 360 * angle;//1°等于Math.PI*1弧度 / 180
            const x = canvas.width / 2 + Math.sin(rad) * loc_radius
            const y = canvas.height / 2 - Math.cos(rad) * loc_radius
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, canvas.height / 2);
            ctx.lineTo(x, y)
            ctx.stroke();

        }
        function drawNumerals2() {
            //弧度=角度×(π ÷180 )  角度=弧度×（180÷π）
            let numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], rad = 0, numeralWidth = 0;
            numerals.forEach(function (numeral) {
                rad = Math.PI / 180 * numeral * 30;//1°等于Math.PI / 180
                numeralWidth = ctx.measureText(numeral).width;
                ctx.fillText(numeral, canvas.width / 2 + Math.sin(rad) * hand_radius - numeralWidth / 2, canvas.height / 2 + Math.cos(rad) * (-hand_radius) + font_height / 3);
            })
        }


        function drawBird() {
            ctx.drawImage(bird, 0, 0, canvas.width, canvas.height)

        }

        loop = setInterval(drawClock, 1000)


        function drawLocImg() {
            const dataUrl = canvas.toDataURL()
            printImg.src = dataUrl
        }

    </script>
</body>

</html>